﻿
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>系统主界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link href="~/X-admin/css/font.css" rel="stylesheet" />
    <link href="~/X-admin/css/xadmin.css" rel="stylesheet" />
    <script src="~/X-admin/lib/layui/layui.all.js"></script>
    <link rel="shortcut icon" href="~/X-admin/images/icony.png" />
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script type="text/html" id="barDemo">
        <a title="再次执行" href="javascript:;" lay-event="view"><i class="layui-icon">&#xe652;</i></a>
    </script>
</head>
<body>

    <div style="width:100%">
        <div id="topPrt" style="width:98%;height:95px;float:left;padding-top:1%">
            <div class="layui-col-sm6 layui-col-md3" style="width: 15%;margin-left:1%">
                <div class="layui-card">
                    <div class="dsTitile">
                        生产中计划数
                    </div>
                    <div class="layui-card-body  ">
                        <p id="plCount" class="dsData">
                        </p>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3" style="margin-left: 1.5%; width: 15%;">
                <div class="layui-card">
                    <div class="dsTitile">
                        待派工计划数
                    </div>
                    <div class="layui-card-body ">
                        <p id="pgCount" class="dsData">
                            @*<a href="javascript:;" id="bg-noQuality" class="layui-badge layui-bg-cyan layuiadmin-badge""></a>*@
                        </p>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3" style="margin-left: 1.5%;  width: 15%;">
                <div class="layui-card">
                    <div class="dsTitile">
                        逾期计划数
                    </div>
                    <div class="layui-card-body ">
                        <p id="yqCount" class="dsData">
                            @*<a href="javascript:;" id="pnofinish" class="layui-badge layui-bg-cyan layuiadmin-badge"></a>*@
                        </p>
                    
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3" style="margin-left: 1.5%; width: 15%;">
                <div class="layui-card">
                    <div class="dsTitile">
                        占用待出库件数
                    </div>
                    <div class="layui-card-body ">
                        <p id="zyCount" class="dsData">
                            @*<a href="javascript:void(0)" id="pg-delay" class="layui-badge layui-bg-cyan layuiadmin-badge" onclick="Details()"></a>*@
                        </p>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3" style="margin-left: 1.5%; width: 15%;">
                <div class="layui-card">
                    <div class="dsTitile">
                      待检件数
                    </div>
                    <div class="layui-card-body ">
                        <p id="jyCount" class="dsData">
                            @*<a href="javascript:void(0)" id="pg-delay" class="layui-badge layui-bg-cyan layuiadmin-badge" onclick="Details()"></a>*@
                        </p>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3" style="margin-left: 1.5%; width: 15%;">
                <div class="layui-card">
                    <div class="dsTitile">
                        待入库件
                    </div>
                    <div class="layui-card-body">
                        <p id="rkCount" class="dsData">
                            @*<a href="javascript:void(0)" id="pg-delay" class="layui-badge layui-bg-cyan layuiadmin-badge" onclick="Details()"></a>*@
                        </p>

                    </div>
                </div>
            </div>
      
        </div>
        <div id="leftTChart" style="width: 63%; height: 240px; float: left;margin-left:1%"></div>
        <div id="RightTChart" style="width: 33%; height: 240px; float: left;margin-left:1%"></div>
        <div style="width:64%;height:250px;float:left;margin-top:1%;">
            <div style="background-color:#fff;padding-left:3%;margin-left:1.5%;padding-top:2%;font-weight: bold">
              生产工序完成进度
            </div>
			<div id="leftMChart" style="width: 98.5%; height: 240px; float: left;margin-left:1.5%;"></div>
        </div>
        <div id="RightMChart" style="width: 33%; height: 270px; float: left;margin-left:1%;margin-top:1%"></div>
   
      
    </div>

</body>

</html>


<script src="~/echarts/echarts.common.js"></script>

<script src="~/echarts/echarts.min.js"></script>

<script src="~/js/framework/echartshow.js"></script>
<script type="text/javascript">

    var bgColor = "#fff";
    $(function () {
        PlanTotal();
        LeftTChartTotal();
        RightChartTotal();
        LeftMChartTotal();
        RightMChartTotal();
    });
    var leftTChart = echarts.init(document.getElementById('leftTChart'), '');
    var leftMChart = echarts.init(document.getElementById('leftMChart'), '');
    var rightTChart = echarts.init(document.getElementById('RightTChart'), '');
    var rightMChart = echarts.init(document.getElementById('RightMChart'), '');
    function LeftTChartTotal() {
        $.ajax({
            url: "../Summary/SaleOrderProductTotal",
            data: {dataCount:"7"},
            dataType: "json",
            type: "POST",
            success: function (data) {
                if (data.result) {
                    var d = data.data;
                    var option = chartLeftTop("销售存货数据统计", d["names"], d["yData"], d["nData"], bgColor);
                    leftTChart.setOption(option);
                } else {
                    layer.msg(data.message);
                }
            }
        });
    }

    function RightChartTotal() {
        $.ajax({
            url: "../Summary/SaleOrderTotal",
            data: {dataCount:"5"},
            dataType: "json",
            type: "POST",
            success: function (rsl) {
                if (rsl.result) {
                    var d = rsl.data;
                    var option = Chart_ZhXZX(d.dlist, "销售订单未完成", bgColor);
                    rightTChart.setOption(option);
                } else {
                    layer.msg(rsl.Message);
                }
            }
        });

    }
    function LeftMChartTotal() {
        $.ajax({
            url: "../Summary/GongXuFinishCount",
            dataType: "json",
            type: "POST",
            success: function (data) {
                if (data.result) {
                    var d = data.data;
                    leftMChart.setOption(chart_MorePie_Gx(d));
                } else {
                    layer.msg(data.message);
                }
            }
        });

    }
    function RightMChartTotal() {
        $.ajax({
            url: "../Summary/ChengPinNeedIn",
            dataType: "json",
            type: "POST",
            success: function (data) {
                if (data.result) {
                    var d = data.data;
                    rightMChart.setOption(Chart_Pie02(d, "成品待入库统计", bgColor));
                } else {
                    layer.msg(data.message);
                }
            }
        });

    }
  function chartLeftTop(title, names, yData, nData, bgColor) {
    var option = {
        backgroundColor: bgColor,
        title: {
            text: title,
            left: '5',
            top: "10",
            // padding: [10, 0, 0, 50],
            textStyle: {
                color: "#000",
                fontSize: 12,
                fontWeight: 600,
                // padding: [0, 0, 0, 35]
            },
        },

        tooltip: {
            trigger: 'axis',
            backgroundColor: "rgba(1, 13, 19, 0.5)",
            borderWidth: 0,
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle: {
                color: "rgba(212, 232, 254, 1)",
                // fontSize: fontChart(0.24),
            },
            confine: true
        },
        grid: {
            top: '25%',
            left: '3%',
            right: '3%',
            bottom: '2%',
            containLabel: true,
        },
        legend: {
            data: ['销售数', '生产数'],
            left: "center",
            top: 30,
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 15,
            borderRadius: 4,
            textStyle: {
                color: "#000",
                fontSize: 12,
                fontWeight: 400,
            },
        },
        xAxis: {
            type: 'category',
            data: names,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ECECEC'
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                // interval: 0,
                // rotate: 40,
                show: true,
                textStyle: {
                    fontFamily: 'Microsoft YaHei',
                    color: '#666666'
                },
                formatter: function (value) {
                    var ret = '';
                    var maxLength = 6; // 换行字数
                    var valLength = value.length;
                    var rowN = Math.ceil(valLength / maxLength);
                    if (rowN > 1) {
                        for (var i = 0; i < rowN; i++) {
                            var temp = '';
                            var start = i * maxLength;
                            var end = start + maxLength;
                            temp = value.substring(start, end) + '\n';
                            ret += temp;
                        }
                        return ret;
                    } else {
                        return value;
                    }
                }
            },
        },

        yAxis: {
            name: '',
            nameTextStyle: {
                color: "#000",
                fontSize: 14,
                fontWeight: 600,
                padding: [10, 0, 0, -30]
            },
            nameGap: 25,  // 表现为上下位置
            type: 'value',
            //max:'5000',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#666666',
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ECECEC'
                }
            },
            axisLabel: {
                textStyle: {
                    fontFamily: 'Microsoft YaHei',
                    color: '#393939',
                    fontSize: 12
                }
            }
        },
        series: [
            {
                name: '销售数',
                type: 'bar',
                barWidth: '25',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#3BB9FF'
                        }, {
                            offset: 1,
                            color: '#5CB3FF'
                        }]),

                    }
                },
                data: yData
            },

            {
                name: '生产数',
                type: 'bar',
                barWidth: '25',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#FBB117'
                        }, {
                            offset: 1,
                            color: '#FFA62F'
                        }]),

                    }
                },
                data: nData
            }
        ]
    };
    return option;
}


 function PlanTotal() {
        $.ajax({
            url: "../Summary/PlanStatusTotal",
            dataType: "json",
            type: "POST",
            success: function (rsl) {
                if (rsl.result) {
                    document.getElementById("plCount").innerText = rsl.data.ingCount;
                    document.getElementById("pgCount").innerText = rsl.data.pgCount;
                    document.getElementById("yqCount").innerText = rsl.data.yqCount;
                    document.getElementById("zyCount").innerText = rsl.data.zyCount;
                    document.getElementById("jyCount").innerText = rsl.data.jyCount;
                    document.getElementById("rkCount").innerText = rsl.data.rkCount;
                } else {
                    layer.msg(data.Message);
                }
            }
        });
    }

 function chart_MorePie_Gx(datas) {
        var data = datas;
        var titleArr = [], seriesArr = [];
        colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
        data.forEach(function (item, index) {
            titleArr.push(
                {
                    text: item.name,
                    left: index * 20 + 14 + '%',
                    top: '72%',
                    textAlign: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: '12',
                        color: colors[index][0],
                        textAlign: 'center',
                    },
                }
            );
            seriesArr.push(
                {
                    name: item.name,
                    type: 'pie',
                    clockWise: false,
                    radius: [40, 55],
                    itemStyle: {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            shadowBlur: 0,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                        }
                    },
                    hoverAnimation: false,
                    center: [index * 20 + 15 + '%', '42%'],
                    data: [{
                        value: item.value,
                        label: {
                            normal: {
                                formatter: function (params) {
                                    return params.value + '个';
                                },
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                    color: colors[index][0]
                                }
                            }
                        },
                    }, {
                        value: 100 - item.value,
                        name: 'invisible',
                        itemStyle: {
                            normal: {
                                color: colors[index][1]
                            },
                            emphasis: {
                                color: colors[index][1]
                            }
                        }
                    }]
                }
            )
        });

        option = {
            backgroundColor: "#fff",
            title: titleArr,
            series: seriesArr
        }
        return option;
    }
</script>